import React, {useEffect, useState} from 'react'
import {Form, Row, Col, Input, Select, Radio, message} from 'antd'
import {PageType} from '../constant'
import Styles from './index.less'
import {
	checkDriverPhone,
	checkNewDriverPhone,
} from '@/service/merchantCenter/clue'

interface ReferrerType {
	pageType: string
	referrerForm: any
	detailRecord: any
	source: '4' | '5'
	keysList: any
}

export function Referrer({
	pageType,
	referrerForm,
	detailRecord,
	source,
	keysList,
}: ReferrerType) {
	const [tabValue, setTabValue] = useState('2')

	const [shows, setShows] = useState(false)

	const disabled = pageType === 'detail'
	const [showDiverId, setShowDiverId] = useState(false)

	const [phoneNum, setPhoneNum] = useState()

	useEffect(() => {
		referrerForm.resetFields()
		referrerForm.setFieldsValue({
			newRecommenderType: source,
		})
		if (source === '4') {
			setShows(true)
		} else {
			setShows(false)
		}
	}, [source])

	// 回显推介人按钮
	useEffect(() => {
		if (detailRecord?.existPhone) {
			setTabValue('1')
		} else {
			setTabValue('2')
		}
		if (Object?.keys(detailRecord)?.length) {
			referrerForm.setFieldsValue({
				...detailRecord,
				phoneStatus: 'true',
				newRecommenderType:
					detailRecord?.newRecommenderType === '-1' ||
					detailRecord?.newRecommenderType === ''
						? source
						: detailRecord?.newRecommenderType,
			})
		}

		if (detailRecord?.newRecommenderType === '4') {
			setShows(true)
		}
		if (detailRecord?.existDriverId && detailRecord?.existDriverId !== 0) {
			setShowDiverId(true)
		}
	}, [detailRecord])

	const getPhone = async (e: any) => {
		const rex = /^[0-9]*$/
		if (rex.test(e.target.value) && e.target.value) {
			const res = await checkDriverPhone({
				phone: e.target.value,
				source,
			})
			if (res.success && res.data?.id) {
				if (res?.data?.driverId === 0) {
					setShowDiverId(false)
				} else {
					setShowDiverId(true)
				}
				referrerForm.setFieldsValue({
					phoneStatus: 'true',
					existDriverId:
						res?.data?.driverId === 0 ? null : res?.data?.driverId,
					existUserName: res?.data?.ditchName,
					existBankAccount: res?.data?.bankCard,
					existAccountBankName: res?.data?.depositBank,
					existBranchBankName: res?.data?.depositBankName,
				})
			} else {
				referrerForm.setFieldsValue({
					phoneStatus: 'false',
					existDriverId: '',
					existUserName: '',
					existBankAccount: '',
					existAccountBankName: '',
					existBranchBankName: '',
				})
				message.warning(
					`${source === '4' ? '司推司' : '普推司'}渠道联系电话不存在`,
				)
			}
		}
	}
	// 通过手机号获取信息
	const phoneChange = (e: any) => {
		// 如果是普推司不需要查手机号是否存在，司推司需要查询
		setPhoneNum(e.target.value)
	}
	const phoneBlur = () => {
		const newRecommenderType =
			referrerForm.getFieldValue('newRecommenderType')
		if (newRecommenderType === '4') {
			if (phoneNum) {
				checkNewDriverPhone({phone: phoneNum}).then((res: any) => {
					if (res?.data?.driverId) {
						// phoneStatus:判断司机手机号是否存在
						referrerForm.setFieldsValue({
							phoneStatus: 'true',
							newPhone: res?.data?.tel,
							newDriverId: res?.data?.driverId,
							newUserName: res?.data?.name,
							newBankAccount: res?.data?.bankCardNo,
							newAccountBankName: res?.data?.bankName,
							newBranchBankName: res?.data?.depositBank,
						})
					} else {
						referrerForm.setFieldsValue({
							phoneStatus: 'false',
						})
						message.warning('未根据司机联系电话查询到司机信息')
					}
				})
			}
		}
	}
	return (
		<div className={Styles.referrer}>
			<div className={Styles.titleBox}>司/普推司推荐人</div>
			{/* {pageType !== PageType.Detail && ( */}
			<div className={Styles.typeBox}>
				<Radio.Group
					value={tabValue}
					onChange={(e) => {
						setTabValue(e.target.value)
						referrerForm.setFieldsValue({
							newRecommenderType: source,
						})
						// eslint-disable-next-line no-unused-expressions
						e.target.value === '1' && referrerForm.validateFields()
					}}>
					<Radio.Button value="1">已有渠道选择</Radio.Button>
					<Radio.Button value="2">新增推荐人</Radio.Button>
				</Radio.Group>
			</div>
			{/* )} */}

			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={referrerForm}
					disabled={pageType === PageType.Detail}>
					<Form.Item name="phoneStatus" hidden>
						<Input />
					</Form.Item>
					<Row>
						{tabValue === '1' ? (
							<>
								<Col span={8}>
									<Form.Item
										label="联系电话"
										name="existPhone"
										rules={[
											{required: true},
											{
												pattern: /^[0-9]*$/,
												message: '请输入正确的手机号',
											},
										]}>
										<Input
											placeholder="请输入"
											disabled={disabled}
											onBlur={getPhone}
										/>
									</Form.Item>
								</Col>
								{showDiverId ? (
									<Col span={8}>
										<Form.Item
											label="司机ID"
											name="existDriverId">
											<Input disabled />
										</Form.Item>
									</Col>
								) : (
									''
								)}
								<Col span={8}>
									<Form.Item
										label="推荐人姓名"
										name="existUserName">
										<Input disabled />
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="银行账号"
										name="existBankAccount">
										<Input disabled />
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="开户银行"
										name="existAccountBankName">
										<Input disabled />
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="开户银支行名称"
										name="existBranchBankName">
										<Input disabled />
									</Form.Item>
								</Col>
							</>
						) : (
							<>
								<Col span={8}>
									<Form.Item
										label="类型"
										name="newRecommenderType"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											disabled
											allowClear
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={keysList}
										/>
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="联系电话"
										name="newPhone"
										rules={[
											{required: true},
											{
												pattern: /^[0-9]*$/,
												message: '请输入正确的手机号',
											},
										]}>
										<Input
											placeholder="请输入"
											disabled={disabled}
											onChange={(e) => phoneChange(e)}
											onBlur={phoneBlur}
										/>
									</Form.Item>
								</Col>
								{shows ? (
									<Col span={8}>
										<Form.Item
											label="司机ID"
											name="newDriverId"
											rules={[
												{required: tabValue === '2'},
											]}>
											<Input
												placeholder={
													tabValue === '2'
														? '请输入'
														: ''
												}
												disabled
											/>
										</Form.Item>
									</Col>
								) : (
									<></>
								)}

								<Col span={8}>
									<Form.Item
										label="推荐人姓名"
										name="newUserName"
										rules={[{required: true, max: 20}]}>
										<Input
											placeholder="请输入"
											disabled={disabled}
										/>
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="银行账号"
										name="newBankAccount"
										rules={[
											{required: tabValue === '2'},
											{
												pattern:
													/^([1-9]{1})(\d{15}|\d{18})$/,
												message: '请输入正确的银行账号',
											},
										]}>
										<Input
											placeholder={
												tabValue === '2' ? '请输入' : ''
											}
											disabled={
												tabValue === '1' || disabled
											}
										/>
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="开户银行"
										name="newAccountBankName"
										rules={[{required: tabValue === '2'}]}>
										<Input
											placeholder={
												tabValue === '2' ? '请输入' : ''
											}
											disabled={
												tabValue === '1' || disabled
											}
										/>
									</Form.Item>
								</Col>
								<Col span={8}>
									<Form.Item
										label="开户银支行名称"
										name="newBranchBankName"
										rules={[{required: tabValue === '2'}]}>
										<Input
											placeholder={
												tabValue === '2' ? '请输入' : ''
											}
											disabled={
												tabValue === '1' || disabled
											}
										/>
									</Form.Item>
								</Col>
							</>
						)}
					</Row>
				</Form>
			</div>
		</div>
	)
}
